<!--
Vue：v-model
> 目标: 掌握v-model指令的使用
- 作用:【数据双向绑定】

v-model绑定html元素的value值到data对象，data对象中的属性又可以绑定到html元素的value。
- 语法: v-model=”数据对象中的属性名”|v-model=”数据对象中的属性名.变量名”
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs数据绑定</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--       定义视图（view）-->
<div id="app">
    姓名:<input type="text" v-model="name.Name"/><br/>
    绰号:<input type="text" v-model="name.chuohao"/><br/>
    年龄:<input type="text" v-model="user.age"/><br/>
    性别:<input type="text" v-model="user.sex"/><br/>
    <hr/>
    姓名：{{name.Name}}，绰号:{{name.chuohao}} ，年龄：{{user.age}}， 性别：{{user.sex}}
</div>

<!--vue的代码-->
<script type="text/javascript">
    // vue实例
    // vue函数需要接受一个参数，配置信息对象json对象
    var vue = new Vue({
        el: '#app',    // element,指定vue需要渲染的html元素
        data: {        // 数据对象(数据模型 model)
            name: {
                Name: "桃子",
                chuohao: "大屌"
            },
            user: {
                age: "23",
                sex: "男"
            }
        }
    });

</script>
</body>
</html>